<template>
	<view class="content">
		<view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/4.png"></image>
				<tn-input class="sl-input" v-model="regForm.username" type="text" :maxLength="32" placeholder="用户名" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<tn-input class="sl-input" v-model="regForm.password" type="text" :maxLength="32" placeholder="登录密码"
					:password="!showPassword" />
				<image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'"
					@tap="display"></image>
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/5.png"></image>
				<tn-input class="sl-input" v-model="regForm.nickname" type="text" :maxLength="32" placeholder="真实姓名" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/6.png" style="color: aqua"></image>
				<tn-input class="sl-input no-caret-input" disabled v-model="postInput" type="select" :maxLength="32"
					placeholder="所在岗位" @click="() => postShow = true" />
				<tn-select v-model="postShow" mode="single" :list="posts" @confirm="postConfirm" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/7.png"></image>
				<tn-input class="sl-input no-caret-input" disabled v-model="deptInput" type="select" :maxLength="32"
					placeholder="所在部门" @click="openDeptSelect" />
				<tn-select v-model="deptShow" mode="single" :list="depts" @confirm="deptConfirm" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<tn-input class="sl-input" v-model="regForm.mobile" type="number" :maxLength="11" placeholder="手机号" />
			</view>
			<!-- <view class="list-call">
				<image class="img" src="/static/shilu-login/3.png"></image>
				<input class="sl-input" v-model="regForm.smsCode" type="number" :maxLength="4" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
			</view> -->

		</view>

		<view class="flex justify-center">
			<view class="button-login margin-right-lg flex align-center justify-center" hover-class="button-hover" @tap="toLogin">
				<text>返回</text>
			</view>
			<view class="button-login  flex align-center justify-center " hover-class="button-hover" @tap="bindLogin">
				<text>注册</text>
			</view>
		</view>

		<!-- 		<view class="agreement">
			<image @tap="agreementSuccess"
				:src="agreement==true?'/static/shilu-login/ty1.png':'/static/shilu-login/ty0.png'"></image>
			<text @tap="agreementSuccess"> 同意</text>
			<navigator url="agreement?id=1" open-type="navigate">《软件用户协议》</navigator>
		</view> -->
	</view>
</template>

<script>
	var _this, js;
	import {
		register,
		getPosts,
		getDepts,
		getSmsCode
	} from '@/api/register'
	export default {
		onLoad() {
			_this = this;
			this.getPosts().then(res => {
				_this.posts = res.data
			})
			this.getDepts().then(res => {
				_this.depts = res.data
			})
		},
		onUnload() {
			clearInterval(js)
			this.second = 0;
		},
		data() {
			return {
				regForm: {
					username: '',
					password: '',
					nickname: '',
					mobile: '',
					deptId: '',
					postIds: [],
					smsCode: ''
				},
				posts: [],
				depts: [],
				code: '',
				invitation: '',
				agreement: true,
				showPassword: false,
				second: 0,
				postShow: false,
				deptShow: false,
				postInput: '',
				deptInput: ''
			};
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return '获取验证码';
				} else {
					if (this.second < 10) {
						return '重新获取0' + this.second;
					} else {
						return '重新获取' + this.second;
					}
				}
			}
		},
		onUnload() {
			this.clear()
		},
		methods: {
			getDepts,
			getPosts,
			getSmsCode,
			register,
			toBack() {
				uni.navigateBack({})
			},
			openDeptSelect(){
				let _this = this
				this.getDepts().then(res => {
					_this.depts = res.data
					_this.deptShow = true
				})	
			},
			postConfirm(e) {
				this.regForm.postIds[0] = e[0].value
				this.postInput = e[0].label
			},
			deptConfirm(e) {
				this.regForm.deptId = e[0].value
				this.deptInput = e[0].label
			},
			clear() {
				clearInterval(js)
				js = null
				this.second = 0
			},
			display() {
				this.showPassword = !this.showPassword
			},
			agreementSuccess() {
				this.agreement = !this.agreement;
			},
			getcode() {
				if (this.regForm.mobile.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.second > 0) {
					return;
				}
				this.second = 60;
				//请求业务
				js = setInterval(function() {
					_this.second--;
					if (_this.second == 0) {
						_this.clear()
					}
				}, 1000)
				debugger
				let mobile = this.regForm.mobile
				this.getSmsCode(mobile)
			},
			toLogin() {
				this.$tab.reLaunch("/pages/login/login")
			},
			bindLogin() {
				if (this.agreement == false) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读《软件用户协议》'
					});
					return;
				}
				if (this.regForm.mobile.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.regForm.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码不能小于六位'
					});
					return;
				}
				// if (this.regForm.smsCode.length != 4) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '验证码不正确'
				// 	});
				// 	return;
				// }

				let data = this.regForm
				this.register(data).then(res => {
					uni.showToast({
						title: '注册成功',
						duration: 2000,
						mask: true,
						image: '/static/index/success.png',
						icon: 'none'
					});
					this.$tab.reLaunch("/pages/login/login")
				})

			}
		}
	}
</script>

<style>
	.no-caret-input {
		caret-color: transparent;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 311rpx;
		height: 91rpx;
		/* background: rgba(63, 205, 235, 1); */
		box-shadow: 5rpx 10rpx 10rpx 7rpx #e2e2e2;
		border-radius: 40upx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 311rpx;
		height: 91rpx;
		border-radius: 40upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.yzm {
		color: #FF7D13;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		border: 1rpx solid #FF7D13;
		border-radius: 50rpx;
	}

	.yzms {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 235rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: RGB(63, 86, 254);
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		text-align: center;
		margin-top: 100rpx;
	}

	.button-hover {
		background: rgb(125, 128, 254);
	}

	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreement image {
		width: 40rpx;
		height: 40rpx;
	}
</style>